<template>
  <div id="mTabs">
    <Button v-for="(prop, index) in btnText"
            :key="index"
            :type="activeDateBtn === prop.value ? 'warning' : 'primary'"
            @click="changeBtn(prop.value, index)"
            :class="[index !== btnText.length - 1 ? 'mar-right-10' : '']"
            :style="[index !== btnText.length - 1 ? btnDistance : '']"
            style="display: inline-block; width: 110px; height: 40px;">{{prop.label}}
    </Button>
  </div>
</template>

<script>
  export default {
    // 组件的名称
    name: 'mTabs',
    // props 可以是数组或对象，用于接收来自父组件的数据
    props: {
      // 文本
      btnText: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 是否激活
      activeDateBtn: {
        type: Number,
        default: null
      },
      // 按钮之间 的 距离
      btnDistance: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    // 数据绑定
    data () {
      return {}
    },
    // 组件
    components: {},
    // 注意，不应该使用箭头函数来定义 methods函数 或者  computed函数 (例如 aDouble: () => this.a * 2)。
    // 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
    // 方法
    methods: {
      // 现场自动
      changeBtn (val, index) {
        this.$emit('changeBtn', val, index)
      }
    },
    // 计算属性
    computed: {},
    // 监听
    watch: {
      // 监听路由变化
    },
    // 常用钩子函数，总共有8个，可以参照vue的生命周期看
    // 完成了 data 数据的初始化，el没有，就是说页面的dom没有完成转化，还是 {{data}} 这种
    created () {
    },
    // 完成挂载，相当于dom ready
    mounted () {
    },
    // 销毁，可以做一些定时器的销毁,缓存的清除等操作
    destroyed () {
    }
  }
</script>

<style lang="scss" scoped='scoped'>
  #mTabs {
    .ivu-btn {
      font-size: 14px;
    }
    .ivu-btn-primary {
      border-radius: 2px;
    }
    .mar-right-10{
      margin-right: 10px;
    }
  }
</style>
